{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
{{ 'spec-multicolumn4.css' | asset_url | stylesheet_tag }}

<div class="spec_multicolumn cgo_spec powerbank_spec" id="powerbank_spec">
  <div class="multicolumn background-{{ section.settings.background_style }}{% if section.settings.title == blank %} no-heading{% endif %}">
    <div class="page-width">
      <details open>
        <summary>
          <div class="title-wrapper-with-link title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
            <h2 class="title">
              {{ section.settings.title | escape }}
            </h2>
          </div>
          <div class="ten-summary">
            {% render 'icon-qjia' %}
            {% render 'icon-qjian' %}
            </div>
        </summary>
        <ul class="row-list">
          {%- for block in section.blocks -%}
            <li class="row-list__item row__item">
              <ul class="row-card__info">
                <li class="row-card__info_item row-card__info_item-title">
                  <span class="rte product-title">{{ block.settings.title1 }}</span>
                  {% if block.settings.text1 != blank %}
                  <span class="rte">{{ block.settings.text1 }}</span>
                  {% endif %}
                </li>
                <li class="row-card__info_item">
                  <span class="rte">{{ block.settings.title2 }}</span>
                  <span class="rte">{{ block.settings.text2 }}</span>
                </li>
                <li class="row-card__info_item">
                  <span class="rte">{{ block.settings.title3 }}</span>
                  <span class="rte">{{ block.settings.text3 }}</span>
                </li>
                <li class="row-card__info_item">
                  <span class="rte">{{ block.settings.title4 }}</span>
                  <span class="rte">{{ block.settings.text4 }}</span>
                </li>
                <li class="row-card__info_item">
                  <span class="rte">{{ block.settings.title5 }}</span>
                  <span class="rte">{{ block.settings.text5 }}</span>
                </li>
                <li class="row-card__info_item">
                  <span class="rte">{{ block.settings.title6 }}</span>
                  <span class="rte">{{ block.settings.text6 }}</span>
                </li>
              </ul>
            </li>
          {%- endfor -%}
        </ul>
      </details>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Specification4",
  "class": "spaced-section spaced-section--full-width specification-four",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Multicolumn",
      "label": "t:sections.multicolumn.settings.title.label"
    }
  ],
  "blocks": [
    {
      "type": "Product",
      "name": "Product",
      "settings": [
        {
          "type": "richtext",
          "id": "title1",
          "label": "Title 1"
        },
        {
          "type": "richtext",
          "id": "text1",
          "label": "Text 1"
        },
        {
          "type": "richtext",
          "id": "title2",
          "label": "Title 2"
        },
        {
          "type": "richtext",
          "id": "text2",
          "label": "Text 2"
        },
        {
          "type": "richtext",
          "id": "title3",
          "label": "Title 3"
        },
        {
          "type": "richtext",
          "id": "text3",
          "label": "Text 3"
        },
        {
          "type": "richtext",
          "id": "title4",
          "label": "Title 4"
        },
        {
          "type": "richtext",
          "id": "text4",
          "label": "Text 4"
        },
        {
          "type": "richtext",
          "id": "title5",
          "label": "Title 5"
        },
        {
          "type": "richtext",
          "id": "text5",
          "label": "Text 5"
        },
        {
          "type": "richtext",
          "id": "title6",
          "label": "Title 6"
        },
        {
          "type": "richtext",
          "id": "text6",
          "label": "Text 6"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Specification4",
      "blocks": [
        {
          "type": "Product"
        },
        {
          "type": "Product"
        }
      ]
    }
  ]
}
{% endschema %}
